﻿@{
    Layout = null;
}
<!-- ko if: fullScrVm.isFullScreen() -->
<span data-bind="click:fullScrVm.fullScreenOff" style="position: fixed; top: 10px; right: 20px; font-size: 30px; z-index: 1003;cursor: pointer;" class="glyphicon glyphicon-remove"></span>
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; background-color: #000; z-index: 1000;">
    <div style="position: relative;width: 100%;"></div>
</div>
<div style="position: fixed; top: 0; left: 0; z-index: 1001; margin: 0 auto;text-align: center;">
    <div style="position: relative; height: 900px; top: 0px; text-align: center; margin: 0 auto;vertical-align: top; ">
        <div><img style="height: 700px;" data-bind="attr:{'src': fullImageUrl}" /></div>
        <hr />
        <div data-bind="foreach: Photos()">
            <img style="height: 70px;" data-bind="attr:{'src': url}" />
        </div>
    </div>
    <div class="shadow-control left" data-bind="click: fullScrVm.nextImage">
        <span style="margin-top: 100%;font-size: 30px;" class="glyphicon glyphicon-chevron-left"></span>
    </div>
    <div class="shadow-control right" data-bind="click: fullScrVm.prevImage">
        <span style="margin-top: 100%; font-size: 30px;" class="glyphicon glyphicon-chevron-right"></span>
    </div>
</div>
<!-- /ko -->
